import React, {useEffect, useState} from 'react';
import {Button, notification, Table, Tag} from "antd";
import axios from "axios";
import {
    CheckCircleOutlined,
    CloseCircleOutlined,
    ClockCircleOutlined,
} from '@ant-design/icons';

export default function AuditList(props) {

    const [dataSource, setDataSource] = useState([]);

    const {username} = JSON.parse(localStorage.getItem('token'))

    // 颜色列表
    const colorList = ['blue', 'green', 'red']
    // 图标列表
    const iconList = [<ClockCircleOutlined/>, <CheckCircleOutlined/>, <CloseCircleOutlined/>]
    // 审核状态列表
    const auditStateList = [
        {
            title: '审核中',
            auditState: 1
        },
        {
            title: '已通过',
            auditState: 2
        },
        {
            title: '未通过',
            auditState: 3
        }
    ]

    useEffect(() => {
        // _ne=0: 表示不等于0，_lte：小于, _jte：大于
        axios.get(`/news?author=${username}&auditState_ne=0&publishState_lte=1&_expand=category`).then(res => {
            console.log(res.data)
            setDataSource(res.data)
        })
    }, [username])

    const columns = [
        {
            title: '新闻标题',
            dataIndex: 'title',
            render: (title, item) => {
                return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
            }
            // todo=>限制该列宽
        },
        {
            title: '作者',
            dataIndex: 'author',
        },
        {
            title: '新闻分类',
            dataIndex: 'category',
            render: (category) => {
                return category.title
            }
        },
        {
            title: '审核状态',
            dataIndex: 'auditState',
            render: (auditState) => {
                return <Tag icon={iconList[auditState - 1]}
                            color={colorList[auditState - 1]}>{auditStateList[auditState - 1].title}</Tag>
            },
            // 筛选
            filters: [
                ...auditStateList.map(item => ({
                    text: item.title,
                    value: item.auditState
                }))
            ],
            // filterMode: 'tree', //全选
            // value: 点击 ok 后传进来的 value，record：dataSource
            onFilter: (value, record) => record.auditState === value,
            width: '20%',
        },
        {
            title: '操作',
            render: (item) => {
                return <div className='noselect'>
                    {item.auditState === 1 && <Button type="primary" size={"small"} onClick={() => {
                        handleRevoke(item)
                    }}>撤销</Button>}
                    {item.auditState === 2 && <Button type="primary" size={"small"} onClick={() => {
                        handlePublish(item)
                    }}>发表</Button>}
                    {item.auditState === 3 && <Button type="primary" size={"small"} onClick={() => {
                        handleRevise(item)
                    }}>修订</Button>}
                </div>
            }
        },
    ]

    // 按撤销执行的函数
    const handleRevoke = (item) => {
        setDataSource(dataSource.filter(data => data.id !== item.id))
        axios.patch(`news/${item.id}`, {
            auditState: 0
        }).then(() => {
            // 通知成功
            notification.success({
                message: '恭喜您！',
                description:
                    '撤销成功，【新闻管理/草稿箱】中查看',
            });
        })
    }

    // 按发表执行的函数
    const handlePublish = (item) => {
        setDataSource(dataSource.filter(data => data.id !== item.id))
        axios.patch(`news/${item.id}`, {
            publishState: 2,
            publishTime: Date.now()
        }).then(() => {
            // 通知成功
            notification.success({
                message: '恭喜您！',
                description:
                    '发布成功，您可以在【发布管理/已发布】中查看',
            });
        })
    }

    // 按修订执行的函数
    const handleRevise = (item) => {
        props.history.push(`/news-manage/update/${item.id}`)
    }

    return (
        <div>
            <Table dataSource={dataSource} columns={columns}
                   rowKey={item => item.id}/> {/* 因为返回的数据中没有 key 属性，所以需要自己设置一个 rowKey */}
        </div>
    )
}